<template>
    <div class="box">
      <div class="top">
          <span class="title">待办事项</span>
      </div>
      <div class="import">
        <input type="text" placeholder="请输入您的待办事项,回车后即可添加" v-model="todo" @change.keyup.enter="todoAdd">
      </div>
      <span v-show="isErr">最多输入10个字符哦</span>
      <div class="content">
        <ul class="roll">
          <li v-for="(item,index) in arrList " :key="index">
            <div>
              <input type="checkbox" class="btncheck" v-model="item.ischeck">
            <span>{{item.content}}</span>
            </div>
            <input type="button" class="ghost-btn" value="删除" @click="todoDel(index)">
          </li>
  
        </ul>
      </div>
      <div class="bottom">
        <div>总计:{{todoList.length}}</div>
        <div>
          <input type="button" value="全部" @click="btnAll">
          <input type="button" value="未完成" @click="btnUndone">
          <input type="button" value="已完成" @click="btnPerform">
        </div>
      </div>

    </div>
</template>

<script setup>
import { computed, ref ,watch,onMounted} from 'vue';
let todoList=ref([])

let todo=ref("")



let isErr = computed(() => {
  // 去除输入内容的前后空格（如果有的话）
  let tmp = todo.value.trim();
  // 这里判断长度小于等于0，或者大于等于50的时候，返回true，表示有错误，这个时候应该阻止其将内容写入到列表中
  return tmp.length >= 11 || tmp.length < 0
})
//新增功能
function todoAdd(){
  if(isErr.value){
    return
  }
  let tmpObj={
    content:todo.value,
    ischeck:false
  }
  todoList.value.push(tmpObj)
  todo.value=""
}

//删除功能
function todoDel(idx){
  todoList.value.splice(idx,1)

}

//筛选功能
let initial=ref("all")

let arrList=computed(()=>{
  if(initial.value==="all"){
    return todoList.value
  }

  if(initial.value==="undone"){
    return todoList.value.filter(item=>!item.ischeck)
  }

  if(initial.value==="perform"){
    return todoList.value.filter(item=>item.ischeck)
  }

})

//全部
function btnAll(){
  initial.value="all"

}
//未完成
function btnUndone(){
  initial.value="undone"

}
//已完成
function btnPerform(){
  initial.value="perform"

}

//本地存储功能
//监听todoList是否发生变化
watch(todoList,(newValue)=>{
  console.log(newValue);
  
  writeData(newValue)
},{deep:true})

onMounted(()=>{
  let data = readData();
  todoList.value.push(...data)
})

function writeData(data){
  localStorage.setItem("todos",JSON.stringify(data))
}

function readData(){
  return JSON.parse(localStorage.getItem("todos")) ||[]
}

</script>

<style >

html{
  height: 100%;
  margin: 0px;
}
body {
  width: 100%;
  height: 100%; 
  margin: 0px;
  background-color: rgb(250, 250, 252);
  display: flex;
  justify-content: center;
  align-items: center; 
}
.box{
  display: flex;
  width: 800px;
  height: 500px;
  background-color: aqua;
  border-radius: 10px;
  flex-direction: column;
  align-items: center
  
}
.top{
  width: 800px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.title{
  display: flex;
  font-size: 30px;
  font-weight: bold;
  
}
.import{
  width: 800px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.import input{
  width: 760px;
  height: 40px;
  border-radius: 10px;
 
}
.import input::placeholder {
  padding-left: 10px;
          
}
.content{
  flex: 1;
  width: 760px;
  border-radius: 10px;
  margin: 20px;
}
.bottom > div {
  display: flex;       
  gap: 20px;           
}
.bottom{
  margin: 10px;
  width: 720px;
  height: 50px;
  border-radius: 10px;
  background-color: aquamarine;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

input[type="button"]{
  background: none;
  border: none;
}

li{
  display: flex;
  list-style: none;
  border-bottom: 1px dashed;
  background-color: 	#98FB98;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  
}
ul{
  margin: 0px;
  padding: 0px;
}
li:first-child{
  border-radius: 10px 10px 0px 0px;
}
li:last-child{
  border-radius: 0px 0px 10px 10px ;
  border-bottom: none;
}
.ghost-btn{
  opacity: 0;              
  transition: opacity 0.3s;
}
li:hover .ghost-btn {
  opacity: 1;                
}
li span{
  text-decoration: none;
}
.btncheck:checked+span{
  text-decoration: line-through;
}
.roll{
  max-height: 240px;
  overflow-y: auto;
  padding: 0px;
}


</style>
